.arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px){
  position:relative;
  background-color:@arrowBgColor;
  border:1px solid @arrowBorderColor;
  &::before,&::after{
    content:'';
    position:absolute;
    width:0;
    height:0;
    border:solid transparent;
  }
  &::before{
    border-width:@arrowSize;
  }
  &::after{
    border-width:@arrowSize - @arrowWidth;
  }
  /*&.lt{
    &::before,&::after{
      bottom:100%;
    }
    &::before{
      left:@position;
      border-bottom-color:@arrowBorderColor;
    }
    &::after{
      left:@position + @arrowWidth;
      border-bottom-color:@arrowBgColor;
    }
  }
  &.rt{
    &::before,&::after{
      bottom:100%;
    }
    &::before{
      right:@position;
      border-bottom-color:@arrowBorderColor;
    }
    &::after{
      right:@position + @arrowWidth;
      border-bottom-color:@arrowBgColor;
    }
  }
  &.lb{
    &::before,&::after{
      bottom:0;
      top:100%;
      border-top-color:@arrowBorderColor;
    }
    &::before{
      left:@position;
    }
    &::after{
      left:@position + @arrowWidth;
      border-top-color:@arrowBgColor;
    }
  }
  &.rb{
    &::before,&::after{
      bottom:0;
      top:100%;
    }
    &::before{
      right:@position;
      border-top-color:@arrowBorderColor;
    }
    &::after{
      right:@position + @arrowWidth;
      border-top-color:@arrowBgColor;
    }
  }*/
}

.arrow-lt(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px);
  &::before,&::after{
    bottom:100%;
  }
  &::before{
    left:@position;
    border-bottom-color:@arrowBorderColor;
  }
  &::after{
    left:@position + @arrowWidth;
    border-bottom-color:@arrowBgColor;
  }
}
.arrow-rt(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px);
  &::before,&::after{
    bottom:100%;
  }
  &::before{
    right:@position;
    border-bottom-color:@arrowBorderColor;
  }
  &::after{
    right:@position + @arrowWidth;
    border-bottom-color:@arrowBgColor;
  }
}
.arrow-lb(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px);
  &::before,&::after{
    bottom:0;
    top:100%;
    border-top-color:@arrowBorderColor;
  }
  &::before{
    left:@position;
  }
  &::after{
    left:@position + @arrowWidth;
    border-top-color:@arrowBgColor;
  }
}
.arrow-rb(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px);
  &::before,&::after{
    bottom:0;
    top:100%;
  }
  &::before{
    right:@position;
    border-top-color:@arrowBorderColor;
  }
  &::after{
    right:@position + @arrowWidth;
    border-top-color:@arrowBgColor;
  }
}
.arrow-tl(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px){
  .arrow(@arrowBgColor,@arrowBorderColor,@arrowSize,@position,@arrowWidth:1px);
  &::before,&::after{
    right:100%;
  }
  &::before{
    top:@position;
    border-right-color:@arrowBorderColor;
  }
  &::after{
    top:@position + @arrowWidth;
    border-right-color:@arrowBgColor;
  }
}

.tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position:15px,@arrowSize:8px){
  [tooltips]{
    position:relative;
    // cursor:pointer;
    &:hover{
      &::before,&::after{
        display:block;
      }
    }
    &::before,&::after{
      display:none;
      position:absolute;
      z-index:1000;
      background-color:@tooltipBgColor;
      border:1px solid @tooltipBorderColor;
    }
    &::before{
      content:attr(tooltips);
      padding:8px 15px;
      text-align: left;
      width:200px;
      font-size:1.3rem;
      color:@tooltipColor;
      border-radius:4px;
      box-shadow:0 10px 20px -5px rgba(0,0,0,0.4);
      white-space:normal;
      word-break:break-all;
      word-wrap:break-word;
    }
    &::after{
      content:'';
      height:@arrowSize + 2px;
      width:@arrowSize + 2px;
      border-left-color:transparent;
      border-bottom-color:transparent;
    }
    /*&.lb{
      &::before{
        left:0;
        bottom:calc(100% + @arrowSize);
      }
      &::after{
        left:@position;
        bottom:calc(100% + @arrowSize/2);
        transform:rotate(135deg);
      }
    }
    &.rb{
      &::before{
        right:0;
        bottom:calc(100% + @arrowSize);
      }
      &::after{
        right:@position;
        bottom:calc(100% + @arrowSize/2);
        transform:rotate(135deg);
      }
    }
    &.lt{
      &::before{
        left:0;
        top:calc(100% + @arrowSize);
      }
      &::after{
        left:@position;
        top:calc(100% + @arrowSize/2);
        transform:rotate(-45deg);
      }
    }
    &.rt{
      &::before{
        right:0;
        top:calc(100% + @arrowSize);
      }
      &::after{
        right:@position;
        top:calc(100% + @arrowSize/2);
        transform:rotate(-45deg);
      }
    }*/
  }
}

.tooltip-lb(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position:15px,@arrowSize:8px){
  [tooltips]{
    .tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position:15px,@arrowSize:8px);
    &::before{
      left:0;
      bottom:calc(100% + @arrowSize);
    }
    &::after{
      left:@position;
      bottom:calc(100% + @arrowSize/2);
      transform:rotate(135deg);
    }
  }
}
.tooltip-rb(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position:15px,@arrowSize:8px){
  [tooltips]{
    .tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position:15px,@arrowSize:8px);
    &::before{
      right:0;
      bottom:calc(100% + @arrowSize);
    }
    &::after{
      right:@position;
      bottom:calc(100% + @arrowSize/2);
      transform:rotate(135deg);
    }
  }
}
.tooltip-lt(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position:15px,@arrowSize:8px){
  [tooltips]{
    .tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position:15px,@arrowSize:8px);
    &::before{
      left:0;
      top:calc(100% + @arrowSize);
    }
    &::after{
      left:@position;
      top:calc(100% + @arrowSize/2);
      transform:rotate(-45deg);
    }
  }
}
.tooltip-rt(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position:15px,@arrowSize:8px){
  [tooltips]{
    .tooltip(@tooltipBgColor,@tooltipBorderColor,@tooltipColor,@position:15px,@arrowSize:8px);
    &::before{
      right:0;
      top:calc(100% + @arrowSize);
    }
    &::after{
      right:@position;
      top:calc(100% + @arrowSize/2);
      transform:rotate(-45deg);
    }
  }
}

.angle(@angleSize,@width:1px){
  @pos:(@angleSize - @width)/2;
  position:relative;
  display:inline-block;
  font-style:normal;
  float:right;
  cursor:pointer;
  height:100%;
  width:2*@angleSize;
  &::before,&::after{
    content:'';
    display:block;
    position:absolute;
    border-radius:1px;
    background-color:currentColor;
    height:@width;
    width:@angleSize;
    left:0;
    transform-origin:100% 50% 0;
    transition:all .3s;
  }
  /*&.bottom{
    &::before,&::after{
      top:calc(50% + @pos);
    }
    &::before{
      transform:rotate(135deg);
    }
    &::after{
      transform:rotate(45deg);
    }
  }
  &.top{
    &::before,&::after{
      top:calc(50% - @pos);
    }
    &::before{
      transform:rotate(225deg);
    }
    &::after{
      transform:rotate(-45deg);
    }
  }*/
}

.angle-bt(@angleSize,@width:1px){
  .angle(@angleSize,@width:1px);
  &::before,&::after{
    top:calc(50% + @pos);
  }
  &::before{
    transform:rotate(135deg);
  }
  &::after{
    transform:rotate(45deg);
  }
}
.angle-top(@angleSize,@width:1px){
  .angle(@angleSize,@width:1px);
  &::before,&::after{
    top:calc(50% - @pos);
  }
  &::before{
    transform:rotate(225deg);
  }
  &::after{
    transform:rotate(-45deg);
  }
}


.follow(@followSize:3px,@followColor:currentColor,@followPadding:0px){
  position:relative;
  &::after{
    content:'';
    display:block;
    position:absolute;
    left:@followPadding;
    bottom:0;
    top:auto;
    height:@followSize;
    width:calc(100% - @followPadding * 2);
    background-color:@followColor;
    transform:scale(0);
    transition:all .3s;
  }
  /*&:hover,*/&.active{
    &::after{
      transform:scale(1);
      transition:all .3s;
    }
  }
}

.follow-vertical(@followSize:3px,@followColor:currentColor,@followPadding:0px){
  .follow(@followSize:3px,@followColor:currentColor,@followPadding:0px);
  &::after{
    left:0;
    bottom:0;
    top:0;
    height:100%;
    width:@followSize;
  }
}

.follow-vertical-right(@followSize:3px,@followColor:currentColor,@followPadding:0px){
  .follow(@followSize:3px,@followColor:currentColor,@followPadding:0px);
  &::after{
    left:auto;
    right:0;
    bottom:0;
    top:0;
    height:100%;
    width:@followSize;
  }
}

